<script src="js/getParameter.js" xmlns:v-bind="http://www.w3.org/1999/xhtml"></script>
<script src="vue/vue.min.js"></script>
<link rel="stylesheet" href="vue/iview.css">
<script src="vue/iview.min.js"></script>
<script>
    $(function () {

        // 给搜索按钮绑定单击事件，获取搜索输入框的内容
        $("#search-button").click(function () {
            // 线路名称
            var rname = $("#search_input").val();
            var cid = getParameter("cid");
            let username = getParameter("username");
            // 跳转路径 http://localhost/travel/route_list.html?cid=5，拼接上rname=xxx
            //location.href = "search/getSearchResult?cid=" + cid + "&rname=" + rname;
            //$.get("search_result.html", {cid: cid, rname: rname});
            location.href = "search_result.html?username=" + username + "&rname=" + rname;
        });

    });


</script>
<div id="indexDemo1">
    <header id="header">
        <!--        <div class="top_banner">-->
        <!--            <img src="images/top_banner.jpg" alt="">-->
        <!--        </div>-->
        <div class="shortcut">
            <Modal
                    v-model="emailModal"
                    title="message"
                    ok-text="send"
                    cancel-text="cancel"
                    @on-ok="ok"
                    @on-cancel="cancel"
                    width="600"
            >

                <div v-for="(items,key) in messageList">
                    <p>{{items.message}}</p>
                </div>
                <br>
                <Row>
                    <i-select v-model="user" style="width:200px" clearable filterable>
                        <i-option v-for="item in userList" :value="item.username">{{ item.username }}</i-option>
                    </i-select>
                </Row>
                <Row>
                    <i-input style="margin-top: 10px;" v-model="emailSend" maxlength="100" show-word-limit
                             type="textarea" placeholder="Enter something..." style="width: 400px"></i-input>
                </Row>
            </Modal>
            <!-- 未登录状态  -->
            <div class="login_out" id="login_out">
                <a href="javascript:;" @click.prevent="emailOpen">message</a>
                <a href="login.html">Login</a>
                <a href="register.html">Register</a>
            </div>

            <!-- 登录状态  -->
            <div class="login" id="login">
                <span id="span_username"></span>
                <a href="javascript:location.href='user/exit';">Logout</a>
                <a href="javascript:;" @click.prevent="emailOpen">message</a>
            </div>
        </div>

        <div class="header_wrap">
            <div class="topbar">
                <div class="logo">
                    <a href="login.html"><img src="images/logo.png" alt=""></a>
                </div>
                <div class="search">
                    <input name="" id="search_input" type="text"
                           placeholder="Enter Keywords for Tutoring Service to Search"
                           class="search_input" autocomplete="off">
                    <a id="search-button" class="search-button">Search</a>
                </div>
            </div>
        </div>
        <div class="navitem" id="toolbar">
            <ul id="category" class="nav">
                <li><a @click="goHome()">HOME</a></li>
                <li><a @click="offerService()">Offer Tutorial Service</a></li>
                <li><a @click="openUser()">Profile</a></li>
                <li><a @click="showServiceList()">Service List</a></li>
                <li><a @click="showTransactionList()">Transaction List</a></li>
            </ul>
        </div>
    </header>
</div>
<script type="text/javascript">
    new Vue({
        el: '#indexDemo1',
        data() {
            return {
                username: '',
                emailModal: false,
                emailSend: '',
                user: '',
                messageList: [],
                userList: []
            }
        },

        created() {
            let username = getParameter("username");
            this.username = username;
            $.get("user/getUserByUsername", {un: username}, function (data) {
                let login_div = document.getElementById("login");
                let logout_div = document.getElementById("login_out");
                if (username != null) {
                    var msg = "Welcome Back, " + data.firstname + " " + data.lastname;
                    $("#span_username").html(msg);
                    logout_div.style.display = "none";
                    login_div.style.display = "block";
                } else {
                    logout_div.style.display = "block";
                    login_div.style.display = "none";
                }

            });

        },

        methods: {
            goHome(){
                location.href = "index.html?username=" + this.username;
            },
            offerService() {
                location.href = "offer_service.html?username=" + this.username;
            },
            emailOpen() {
                this.emailModal = true;
            },

            cancel() {
                this.emailModal = false;
            },

            ok() {
                this.emailModal = false;
            },
            openUser() {
                location.href = "profile.html?username=" + this.username;
            },
            showServiceList() {
                location.href = "service_list.html?username=" + this.username;
            },
            showTransactionList() {
                location.href = "transactions.html?username=" + this.username;
            }
        },

        mounted() {
        }
    });

</script>
<!-- 头部 end -->
    
    